<template>
  <div class="location-view">
    <div class="search-from">
      <div class="select">
        <n-space vertical class="select-item">
          <n-select v-model:value="keyword1" :options="selectOption1" placeholder="请选择字段" disabled/>
        </n-space>
        <n-space vertical class="select-item">
          <n-select v-model:value="keyword2" :options="selectOption2" placeholder="请选择字段"/>
        </n-space>
      </div>
      <div class="submit">
        <n-button
            type="info"
            style="width: 92.5%;margin-top: 1.5vh;"
            @click="startSearch"
        >
          查询
        </n-button>
      </div>
    </div>
    <div class="searchRes" v-if="isResShow">
      <n-data-table
          :columns="columns"
          :data="data"
          class="table"
          max-height="67vh"
      />
    </div>
  </div>
</template>

<script setup>
import {NSpace, NSelect, NButton,NDataTable} from "naive-ui"
import { defineComponent, ref } from 'vue'
import axios from "axios"
defineComponent(  {
  NSpace,
  NSelect,
  NButton,
  NDataTable
})
/*查询*/
// 查询选项
const selectOption1 = [
  {
    label: "抚顺市",
    value: 'CJDCQ',
  },
]
const selectOption2 = [
  {
    label: "村界",
    value: 'CJDCQ',
  },{
    label: "行政区",
    value: 'XZQ',
  }
  // ,{
  //   label: "地类图斑",
  //   value: 'DLTB',
  // }
]
// 字段值
const keyword1 = ref('CJDCQ')
const keyword2 = ref()
// 结果显隐s
const isResShow = ref(false)

/*查询结果表格*/
const data = ref([])

const columns = [
  {
    title: "id",
    key: "id"
  },
  {
    title: "名称",
    key: "name"
  },
]
// 查询url
const urlCJDCQ = 'http://120.46.72.236:8080/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=hywebgis:CJDCQ&outputFormat=application/json'
const urlDLTB = 'http://120.46.72.236:8080/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=hywebgis:DLTB&outputFormat=application/json'
const urlXZQ = 'http://120.46.72.236:8080/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=hywebgis:XZQ&outputFormat=application/json'

// base function
const searchBase = (url) => {
  return axios.get(url)
}
// 开始查询
const startSearch = () => {
  let url
  data.value = []
  if(keyword2.value === 'CJDCQ') {
    url = urlCJDCQ
  } else if (keyword2.value === 'DLTB'){
    url = urlDLTB
  } else if (keyword2.value === 'XZQ'){
    url = urlXZQ
  } else if (!keyword2.value){
    return alert('请选择想要查询的数据')
  }
  try {
    let type
    switch (keyword2.value){
      case 'CJDCQ' :
        type = 'ZLDWMC'
        queryCJDCQ(url);
        break;
      case 'XZQ' :
        type = 'XZQMC'
        queryXZQ(url);
        break;
      case 'DLTB' :
        type = 'XZQMC'
        queryDLTB(url);
        break;
    }
  } catch (e) {
    console.log(e)
  }
}

// 查询村界
const queryCJDCQ = async (u) => {
  const res = await searchBase(u)
  console.log(res)
  if(res.data.features && res.data.features.length) {
    console.log(u)
    for (let i = 0; i < res.data.features.length; i++) {
      data.value.push(
        {
          'id': res.data.features[i].id,
          name: res.data.features[i].properties.ZLDWMC,
        }
      )
      isResShow.value = true
    }
  }
}

// 查询地类图斑
const queryDLTB = async (u) => {
  const res = await searchBase(u)
  console.log(res)
  if(res.data.features && res.data.features.length) {
    console.log(u)
    for (let i = 0; i < res.data.features.length; i++) {
      data.value.push(
        {
          'id': res.data.features[i].id,
          name: res.data.features[i].properties.DLMC,
        }
      )
      isResShow.value = true
    }
  }
}

// 查询行政区
const queryXZQ = async (u) => {
  const res = await searchBase(u)
  console.log(res)
  if(res.data.features && res.data.features.length) {
    console.log(u)
    for (let i = 0; i < res.data.features.length; i++) {
      data.value.push(
        {
          'id': res.data.features[i].id,
          name: res.data.features[i].properties.XZQMC,
        }
      )
      isResShow.value = true
    }
  }
}

</script>

<style scoped lang="less">
.location-view{
  position: absolute;
  z-index: 999;
  color: white;
  height: 81%;
  width: 19.3%;
  top: 16%;
  //padding-left: 1.5vw;
  box-sizing: border-box;
  margin-top: 2vh;
  //border: 1px solid;
  left: 1%;
  background-color: rgba(224,255,255,.3);
  border-radius: 5px;
  padding-top: 2vh;
  .search-from{
    .select{
      display: flex;
      margin-left: 1vw;
      width: 100%;
      .select-item{
        width: 45%;
        margin-right: 0.5vw;
      }
    }
    .submit{
      display: flex;
      margin-left: 1vw;
      width: 100%;
    }
  }
  .searchRes{
    display: flex;
    margin-left: 1vw;
    width: 100%;
    .table{
      margin-top: 2vh;
      width: 92.5%;
      max-height: 67vh;
    }
  }
}
</style>